<template>
	<div class="personalInfo-box">
		<ul>
			<li class="personalInfoTX">
				<span>头像</span>
				<Iconfont class="arrow-right hideOpcity" iconClass="youjiantou2" />
				<img :src="userInfo_tx"/>
				
			</li>
			<li class="personalInfo-nikeName" @click="clickNikeName">
				<span>昵称</span>
				<span class="personalInfo-nikeName-value">{{nickname}}</span>
				<Iconfont class="arrow-right hideOpcity" iconClass="youjiantou2" />
			</li>
			<li class="personalInfo-phone" @click="clickPhone">
				<span>手机</span>
				<span class="personalInfo-phone-value">{{phoneNum}}</span>
				<Iconfont class="arrow-right" iconClass="youjiantou2" />
			</li>
		</ul>
	</div>
</template>

<script>
	import imgTx from "../../assets/images/pic.jpg";
	export  default {
		data() {
			return{
				phoneNum:"",
				userInfo_tx: this.$store.state.userInfo.wxpic || imgTx ,
				nickname :this.$store.state.userInfo.nickname  || window.localStorage.getItem('userNickName'),
			}
		},
		created:function () {
			this.$store.dispatch("hideNav");
			this.getIsBingPhone()
		},
		computed:{
		},
		methods:{
			//点击名称
			clickNikeName(){
				//this.$router.push(`/${this.$channel}/fillInPhone`)
			},
			//点击手机号码
			clickPhone(){
				if(this.phoneNum=="未绑定"){
					this.$router.push(`/${this.$channel}/fillInPhone`)
				}else {
					this.$router.push(`/${this.$channel}/changePhoneParent`)
				}
			},
			//查询有没有绑定手机号码
			getIsBingPhone(){
				this.$http.get("/user/checkMobilBind").then(res => {
		          if (res.data.code == "000000") {
		             //console.log(res.data);
		              if(res.data.data==""){
		              this.phoneNum = "未绑定"
		              }else{
		              	this.phoneNum = res.data.data
		              	window.sessionStorage.setItem("bingPhone",res.data.data)
		              }
		          } else {
		          }
		        })
		        .catch(response => {
		         
		        });
			}
		}
	}
</script>

<style scoped="scoped">
	.personalInfo-box ul {
		width: 640px;
		margin: 0 auto;
	}
	.personalInfo-box ul li{
       width: 100%;
       height: 115px;
      /* background: pink;*/
       border-bottom: 1px  solid rgba(197,197,197,1);;
	}
	.personalInfo-box ul .personalInfoTX{
		width: 100%;
		height: 200px;
		/*background: #0086B3;*/
	}
	.personalInfoTX{
		line-height: 200px;
		font-size:32px;
		font-weight:500;
		color:rgba(12,12,12,1);
	}
	.personalInfoTX img{
		width: 140px;
		height: 140px;
		float: right;
		margin: 30px 20px;
		border-radius: 50%;
	}
	  .arrow-right {
	    font-size: 30px;
	    color: #ccc;
	    font-weight: 600;
	    text-align: right;
	    float: right;
  }
  .personalInfo-nikeName,.personalInfo-phone{
  	line-height: 115px;
  	color:rgba(12,12,12,1) ;
  }
  .personalInfo-nikeName-value,.personalInfo-phone-value{
  	width: 510px;
  	height: 115px;
  	text-align: right;
  	display: inline-block;
  	color: #C5C5C5;
/*  	background: #0086B3;*/
  }
.hideOpcity{
	opacity: 0;
}
</style>